import { useEffect, useState } from 'react'
import s from './style.module.less'
import { useLocation, useNavigate } from 'react-router-dom'

interface Tab {
    id: number;
    name: string;
    path: string;
  }
const TabBar:React.FC=()=>{
    const [active,setActive]=useState(1)
    const [showNav,setShowNav]=useState(false)
    const arr:string[]=['/find','/','/connect','/my']
    const location=useLocation()
    const { pathname } = location // 获取当前路径
    // 使用useEffect来监听路径的改变
    useEffect(()=>{
            setShowNav(arr.includes(pathname))
    },[pathname])
   
    const tabList:Tab[]=[
        {id:1,name:"消息",path:'/'},
        {id:2,name:"联系",path:'/connect'},
        {id:3,name:"发现",path:'/find'},
        {id:4,name:"我的",path:'/my'}
    ]
    const navigate=useNavigate()
    const handleButton=(key:number,path:string)=>{
        setActive(key)
        navigate(path)

    }
    return <>
    <div className={showNav?s.tab:s.un}>
    {showNav&&tabList.map(i=><div key={i.id} className={i.id===active?s.active:s.un} onClick={()=>handleButton(i.id,i.path)}>{i.name}</div>)}
    </div>
   
    </>
}

export default TabBar